<template>
  <div class="page-plugin">
    <div class="local-icon" :class="{ 'on': pluginLocal.length && model.getPluginLocal() }" @mouseover="model.setPluginLocal(true)"><i></i></div>
    <div class="local" :class="{ 'on': pluginLocal.length && model.getPluginLocal() }" @mouseover="model.setPluginLocal(true)" @mouseleave="model.setPluginLocal(false)">
      <div class="plugin">
        <div class="item" v-for="(item, key) in pluginLocal" :key="key" >
          <img :src="item.img()" @click="onPluginOpen(item)" />
          <div class="name">{{ item.name() }}</div>
        </div>
      </div>
    </div>
    <Header ref="header" />
  </div>
  <router-view />
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import model from './model'
import Header from './header.vue'

export default {
  components: {
    Header
  },
  setup() {
    const header = ref()

    // 常用插件
    const pluginLocal = app.plugin.local

    // 打开最近插件
    const onPluginOpen = plugin => {
      // 切换插件
      app.plugin.open(plugin)
      // 更新插件信息
      header.value.updatePlugin()
    }

    return {
      model,
      header,
      pluginLocal,
      onPluginOpen
    }
  }
}
</script>